<template>

    <div class="labelListRadio">
        <div class="float_right width_50px pointer more" @click="toggleMore">更多</div>

        <div class="margin_right_50 label_container">
            <ul class="label_ul" :class="{show_one_line:isShowMore}">
                <li class="label_ul_li" @click="selectLabel(item.MID,key,$event)" v-for="(item,key) in labelList">
                    <span :class="{active: item.MID==activeIndex}">{{item.MName}}</span>
                </li>
            </ul>
            <div class="clear_both"></div>
        </div>

    </div>

</template>
<script>
    import $ from "jquery"
    // 发送ajax 请求的组件
    import getData from '../../../api/getData'

    var firstLabelClassLogic = {
        // 获取自定义一级类目
        getMeatilFirstLevelClassAction: function (vueObj) {
            getData.get("getMeatilFirstLevelClass", {}).then(function (response) {
                vueObj.labelList = $.extend(true, {}, response.data.data);
                vueObj.activeIndex = vueObj.labelList[0].MID;
                vueObj.$emit("init-ok", vueObj.labelList[0], vueObj.activeIndex);
            })
                .catch(function (response) {
                    console.log(response);
                });
        }
    };

    export default {
        props: [],
        data: function () {
            return {
                // 当前选中的索引
                activeIndex: 9999999,
                // 是否显示所有,默认是不显示所有的，及超过一行，则隐藏
                isShowMore: true,
                labelList: []
            }
        },
        computed: {},
        // 组件初始化完成执行的方法
        mounted: function () {
            // 默认选择第一个列表
            firstLabelClassLogic.getMeatilFirstLevelClassAction(this);
        },
        methods: {
            // 点击选中的标签
            selectLabel: function (key, index, myevent) {
                this.activeIndex = key;
                this.$emit("select-label", this.labelList[index], key);
            },
            // 切换是否显示更多
            toggleMore: function () {
                this.isShowMore = !this.isShowMore;
            }
        }
    }
</script>

<style scoped lang="scss">
    .labelListRadio {
        .more {
            position: relative;
            z-index: 99;
        }

        line-height: 35px;
        .label_container {
            position: relative;
            background: #fafafa;
            padding: 0 20px;
            margin: 20px 0;

            .label_ul {
                list-style: none;

                &.show_one_line {
                    height: 35px;
                    overflow: hidden;
                }

                .label_ul_li {
                    cursor: pointer;
                    float: left;
                    margin-right: 15px;

                    span {
                        &:hover {
                            /*color:red;*/
                        }
                        &.active {
                            background: #6dcef0;
                            padding: 3px 10px;;
                            border-radius: 2px;
                            color: #fff;
                        }
                    }
                }

            }
        }

    }
</style>
